CSS 강제 설정

✒️ 2025-05-16 12:36 내용 수정

• bootstrap을 사용하다 보니 bootstrap의 기본 variable과 스타일 때문에 새로 커스텀하려는 코드가 제대로 적용되지 않던 문제가 많았다.
  • 주로 React bootstrap component와 bootstrap component를 사용할 때 발생했다.
• 정리한 코드는 React와 React bootstrap을 기준으로 작성했다.

1. 스타일 적용 대상에 !important 추가하기
   • 스타일을 적용시킬 boostrap component에 커스텀 class나 id를 지정하고, 해당 class나 id에 스타일을 작성 후 !important를 추가한다.

import Button from 'react-bootstrap/Button';

function App() {
	return(
		<Button className='test'>테스트</Button>
	)
}

/* 스타일 property에 !important를 붙여준다. */
.test {
	color: #f5f5f5 !important;
}

2. focus나 active와 같은 가상 클래스에 스타일 강제 설정하기
   • 가상 클래스(Pseudo Class) 참고.
   • bootstrap component에 기본 설정된 focus나 active등의 설정이 들어있는 경우, 1번과 동일한 방법을 사용한다.
   • 특히 bootstrap의 Button, Form.Control 등에 focus 설정이 많이 들어있어서 이 부분을 처리하는데 굉장히 애를 먹었다.

import Button from 'react-bootstrap/Button';

function App() {
	return(
		<Button className='test'>테스트</Button>
	)
}

/* active나 focus 등 필요한 설정에 적용한다. */
.test:active {
	color: #f5f5f5 !important;
}

• 의사 클래스 설정을 확인할 때 직접 요소를 클릭하거나 focus일 때 확인하는 방법도 있지만 브라우저에서 F12를 눌러 해당 요소에서 우클릭을 눌러 force state를 사용하여 확인하는 것으로 찾을 수 있다.
  • 부가적으로 개발자 도구에서 element(요소) - style(스타일)에서 filter를 적용해서 특정 클래스만 보이도록 설정하면 빠르게 확인할 수 있다.

3. boostrap variable을 변경하기
   • Pagination의 스타일을 변경했을 때 사용한 방법으로, bootstrap의 pagination의 style variable을 강제로 변경한다.
   • variable을 공유하는 다른 bootstrap component가 있다면 변경할 때 주의해야 한다.
   • 아래 예시는 pagination의 버튼이나 a 태그를 누르면 생기는 배경색이나 글자색 변경, 테두리를 삭제한다.

.pagination a{
    color : #a6a6a6 !important;
    text-decoration: none !important;
}

.pagination{
    margin:0 !important;
    padding:0 !important;
    --bs-pagination-color: #ddd !important;
    --bs-pagination-bg : transparent !important;
    --bs-pagination-active-color: rgb(0, 166, 255) !important;
    --bs-pagination-active-border-color: none !important;
    --bs-pagination-active-bg: transparent !important;
    --bs-pagination-hover-color: transparent !important;
    --bs-pagination-hover-bg: transparent !important;
    --bs-pagination-focus-color: transparent !important;
    --bs-pagination-focus-box-shadow: none !important;
}